<div>
    <svg id='destinydiagram' width="100%" height="100%">
        <svg [attr.id]="item.id" *ngFor="let item of desnity.SourceDestinyInfos,let i = index" [attr.x]="getX(item.start)" [attr.y]="getY(i,true)"
        [attr.width]="getWidth(item)" [attr.height]="50">
        <foreignObject x="320" y="200" width="160" height="160">

            <body>
                <div>
                    <!-- <input type="text" [(ngModel)]="item.text"> -->
    
                    <i class="{{ui.getIcon(item.EntityType)}}"></i>
                </div>
            </body>
        </foreignObject>
            <text fill="red" [attr.x]="0" [attr.y]="5" >{{item.EntityInfo}}</text>
        </svg>
    <line id="hline" x1="0" y1="50%" x2="100%" y2="50%" style="stroke:rgb(255, 150, 0);stroke-width:8"></line>
    <svg [attr.id]="item.id" *ngFor="let item of desnity.TargetDestinyInfos,let i = index" [attr.x]="getX(item.start)" [attr.y]="getY(i,false)" [attr.width]="getWidth(item)" [attr.height]="50">
            <text fill="red" [attr.x]="0" [attr.y]="5" >{{item.EntityInfo}}</text>
        </svg>
    </svg>
</div>